<template>
  <div class="panel-container">
    <ScrollContainer>
      <!-- <component :is="tabComp[formConfig.activeKey]" /> -->
      <FormProps v-show="formConfig.activeKey === 0" />
      <FormItemProps v-show="formConfig.activeKey === 1" />
      <ComponentColumnProps v-show="formConfig.activeKey === 2" />
      <ComponentProps v-show="formConfig.activeKey === 3" />
      <!-- [FormProps, FormItemProps, ComponentColumnProps, ComponentProps] -->
    </ScrollContainer>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import FormProps from '../components/FormProps.vue';
  import FormItemProps from '../components/FormItemProps.vue';
  import ComponentProps from '../components/ComponentProps.vue';
  import ComponentColumnProps from '../components/FormItemColumnProps.vue';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { customComponents } from '../../../core/formItemConfig';
  import { ScrollContainer } from '/@/components/Container';

  type ChangeTabKey = 1 | 2;
  export interface IPropsPanel {
    changeTab: (key: ChangeTabKey) => void;
  }
  export default defineComponent({
    name: 'PropsPanel',
    components: {
      FormProps,
      FormItemProps,
      ComponentProps,
      ComponentColumnProps,
      ScrollContainer,
    },
    setup() {
      const { formConfig } = useFormDesignState();
      const slotProps = computed(() => {
        return customComponents.find(
          (item) => item.component === formConfig.value.currentItem?.component,
        );
      });
      // const tabComp = [FormProps, FormItemProps, ComponentColumnProps, ComponentProps];

      return { formConfig, customComponents, slotProps };
    },
  });
</script>

<style lang="less" scoped>
  @import url(../styles/variable.less);

  .panel-container {
    box-sizing: border-box;
    height: calc(100% - 50px);

    :deep(.properties-content) {
      width: 100%;
      // position: absolute;
      padding: 20px 16px;
      // overflow-y: auto;

      .ant-form {
        width: 100%;
      }

      // .ant-form-item,
      .ant-slider-with-marks {
        margin-left: 8px;
        // margin-right: 20px;
        // margin-bottom: 0;
      }

      .ant-form-item {
        // width: 100%;
        margin-bottom: 24px;

        .ant-form-item-label {
          line-height: 2;
          vertical-align: text-top;
        }
      }

      .ant-input-number {
        width: 100%;
      }

      .hint-box {
        margin-top: 100px;
      }
    }
  }
</style>
